<template>
  <div style="width: 60%; margin: 10px auto">
    <div class="card" style="padding: 20px; display: flex; grid-gap: 20px; margin-bottom: 20px">
      <img :src="data.shop.avatar" alt="" style="width: 200px; height: 200px">
      <div style="flex: 1; display: flex; flex-direction: column; justify-content: space-around">
        <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px">{{ data.shop.name }}</div>
        <div style="margin-bottom: 10px">
          <span style="color: #666">宠物类型：</span>
          <span>{{ JSON.parse(data.shop.sellPet || '[]').join('、') }}</span>
        </div>
        <div style="margin-bottom: 10px">
          <span style="color: #666">联系方式：</span>
          <span>{{ data.shop.phone }}</span>
        </div>
        <div style="margin-bottom: 10px">
          <span style="color: #666">店铺地址：</span>
          <span>{{ data.shop.address }}</span>
        </div>
        <div style="text-align: justify; line-height: 20px">
          <span style="color: #666">店铺介绍：</span>
          <span>{{ data.shop.introduce }}</span>
        </div>
      </div>
    </div>

    <div class="card" style="padding: 20px; margin-bottom: 20px">
      <div style="font-size: 24px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #ccc">宠物信息</div>
      <div style="padding-top: 20px" v-if="data.petTotal > 0">
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in data.petList" :key="item.id">
            <div style="cursor: pointer" @click="router.push('/front/petDetail?id=' + item.id)">
              <img :src="item.image" alt="" style="width: 100%; height: 200px; display: block; border-radius: 5px">
              <div style="margin: 10px 0; display: flex; align-items: center">
                <el-tag type="info" v-if="item.sex === '公'">公</el-tag>
                <el-tag type="primary" v-if="item.sex === '母'">母</el-tag>
                <span style="font-size: 20px; font-weight: bold; margin-left: 5px">{{ item.name }}</span>
                <span style="font-size: 20px; color: red; margin-left: 10px">￥{{ item.price }}</span>
              </div>
            </div>
          </el-col>
        </el-row>

        <div style="margin-top: 20px" v-if="data.petTotal">
          <el-pagination
              @current-change="loadPetList"
              @size-change="handlePetSizeChange"
              background layout="total, prev, pager, next, jumper, sizes"
              :page-sizes="[1, 3, 5, 10, 15, 20, 30]"
              :page-size="data.petPageSize"
              v-model:current-page="data.petPageNum"
              :total="data.petTotal"/>
        </div>
      </div>
      <div style="padding-top: 50px; padding-bottom: 30px; text-align: center; color: red" v-else>
        暂无宠物...
      </div>
    </div>

    <div class="card" style="padding: 20px; margin-bottom: 20px">
      <div style="font-size: 24px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #ccc">宠物用品信息</div>
      <div style="padding-top: 20px" v-if="data.goodsTotal > 0">
        <el-row :gutter="20">
          <el-col :span="6" v-for="goods in data.goodsList" :key="goods.id">
            <div class="card" style="padding: 0; border-radius: 5px; overflow: hidden; margin-bottom: 20px">
              <img :src="goods.image" alt="" style="width: 100%; height: 200px">
              <div style="padding: 10px">
                <div style="font-size: 20px; margin-bottom: 10px; display: flex; align-items: center">
                  <el-tag type="success">售卖中</el-tag>
                  <span style="font-weight: bold; margin-left: 5px; flex: 1; width: 0" class="line1">{{
                      goods.name
                    }}</span>
                </div>
                <div style="display: flex; align-items: center; margin: 15px 0">
                  <div style="font-size: 18px; color: red; flex: 1">￥{{ goods.price }}</div>
                  <div>
                    <el-button @click="view(goods)" type="primary" plain size="small">查看详情</el-button>
                  </div>
                </div>
                <div style="display: flex; align-items: center">
                  <div style="flex: 1">
                    <el-input-number v-model="goods.num" :min="1" style="width: 100px" size="small"></el-input-number>
                  </div>
                  <div>
                    <el-button @click="addCart(goods)" type="danger" size="small">加入购物车</el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <div style="margin-top: 20px" v-if="data.goodsTotal">
          <el-pagination
              @current-change="loadGoodsList"
              @size-change="handleGoodsSizeChange"
              background layout="total, prev, pager, next, jumper, sizes"
              :page-sizes="[1, 3, 5, 10, 15, 20, 30]"
              :page-size="data.goodsPageSize"
              v-model:current-page="data.goodsPageNum"
              :total="data.goodsTotal"/>
        </div>
      </div>
      <div style="padding-top: 50px; padding-bottom: 30px; text-align: center; color: red" v-else>
        暂无宠物用品...
      </div>
    </div>

    <el-dialog title="宠物用品详情" v-model="data.goodsVisible" width="40%" destroy-on-close>
      <div style="padding: 20px; color: #333">
        <div style="text-align: center; margin-bottom: 10px"><img style="width: 50%" :src="data.goods.image" alt=""></div>
        <div style="display: flex; align-items: center; margin-bottom: 10px">
          <el-tag type="success">售卖中</el-tag>
          <span style="font-size: 20px; font-weight: bold; margin-left: 5px">{{ data.goods.name }}</span>
        </div>
        <div style="margin: 10px 0"><span style="color: #666">宠物用品销量：</span>{{ data.goods.sale }}</div>
        <div style="margin: 10px 0"><span style="color: #666">宠物用品类型：</span>{{ data.goods.typeName }}</div>
        <div style="margin: 10px 0; text-align: justify; line-height: 20px"><span style="color: #666">宠物用品简介：</span>{{ data.goods.descr }}</div>
        <div style="margin: 10px 0;"><span style="color: #666">宠物用品价格：</span><span style="font-size: 18px; color: red">￥{{ data.goods.price }}</span></div>
        <div style="margin: 10px 0;"><span style="color: #666">宠物用品库存：</span><span style="font-size: 18px; color: orange">{{ data.goods.store }}</span></div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.goodsVisible = false">关 闭</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
  import { reactive } from "vue";
  import request from "@/utils/request.js";
  import router from "@/router/index.js";
  import {ElMessage} from "element-plus";

  const data = reactive({
    user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
    id: router.currentRoute.value.query.id, // 宠物店id
    shop: {},
    petList: [],
    petPageNum: 1,
    petPageSize: 10,
    petTotal: 0,
    goodsList: [],
    goodsPageNum: 1,
    goodsPageSize: 10,
    goodsTotal: 0,
    goods: {},
    goodsVisible: false
  })

  window.scrollTo({top: 0})

  const view = (goods) => {
    data.goodsVisible = true
    data.goods = goods
  }

  request.get('/petShop/query?id=' + data.id).then(res => {
    if (res.code === '200') {
      data.shop = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })

  const loadPetList = () => {
    // 查询宠物列表
    request.get('/pet/pageQuery', {
      params: {
        pageNum: data.petPageNum,
        pageSize: data.petPageSize,
        shopId: data.id,
        status: '上架'
      }
    }).then(res => {
      if (res.code === '200') {
        data.petList = res.data?.list
        data.petTotal = res.data?.total
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
  loadPetList()

  const handlePetSizeChange = (newSize) => {
    data.petPageSize = newSize
    data.petPageNum = 1  // 切换页大小时重置到第一页
    loadPetList()
  }


  const loadGoodsList = () => {
    request.get('/goods/pageQuery', {
      params: {
        pageNum: data.goodsPageNum,
        pageSize: data.goodsPageSize,
        shopId: data.id,
        status: '上架'
      }
    }).then(res => {
      if (res.code === '200') {
        data.goodsList = res.data?.list
        data.goodsTotal = res.data?.total
        data.goodsList.forEach(goods => {
          goods.num = 1
        })
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
  loadGoodsList()

  const handleGoodsSizeChange = (newSize) => {
    data.goodsPageSize = newSize
    data.goodsPageNum = 1  // 切换页大小时重置到第一页
    loadGoodsList()
  }

  // 加入购物车
  const addCart = (goods) => {
    request.post('/cart/add', {
      goodsId: goods.id,
      num: goods.num
    }).then(res => {
      if(res.code === '200') {
        ElMessage.success('加入购物车成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
</script>